<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>

<html class="no-js" lang="en">


<head>
    <%@include file="head.jsp"%>
    <title>划水商城</title>
</head>
<body>

<!-- Page Wrapper -->
<div id="wrap" class="layout-1">

    <%@include file="header.jsp"%>

    <!-- Slid Sec -->
    <section class="slid-sec">
        <div class="container">
            <div class="container-fluid">
                <div class="row">

                    <!-- 轮播图  -->
                    <div class="col-md-9 no-padding">
                        <!-- Main Slider Start -->
                        <div class="tp-banner-container">
                            <div class="tp-banner">
                                <ul>
                                    <!-- SLIDE  -->
                                    <c:forEach items="${image}" var="item">
                                    <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=111" ><li data-transition="random" data-slotamount="7" data-masterspeed="300"  data-saveperformance="off" >
                                        <!-- MAIN IMAGE -->
                                        <img src="${item.c_img}"  alt="slider"  data-bgposition="center bottom" data-bgfit="cover" data-bgrepeat="no-repeat" >
                                        <!-- LAYER NR. 1 -->
                                        <div class="tp-caption sfl tp-resizeme"
                                             data-x="left" data-hoffset="60"
                                             data-y="center" data-voffset="-110"
                                             data-speed="800"
                                             data-start="800"
                                             data-easing="Power3.easeInOut"
                                             data-splitin="chars"
                                             data-splitout="none"
                                             data-elementdelay="0.03"
                                             data-endelementdelay="0.4"
                                             data-endspeed="300"
                                             style="z-index: 5; font-size:30px; font-weight:500; color:#888888;  max-width: auto; max-height: auto; white-space: nowrap;">${item.c_name1}</div>

                                        <!-- LAYER NR. 2 -->
                                        <div class="tp-caption sfr tp-resizeme"
                                             data-x="left" data-hoffset="60"
                                             data-y="center" data-voffset="-60"
                                             data-speed="800"
                                             data-start="1000"
                                             data-easing="Power3.easeInOut"
                                             data-splitin="chars"
                                             data-splitout="none"
                                             data-elementdelay="0.03"
                                             data-endelementdelay="0.1"
                                             data-endspeed="300"
                                             style="z-index: 6; font-size:50px; color:#0088cc; font-weight:800; white-space: nowrap;">${item.c_name2}</div>

                                        <!-- LAYER NR. 3 -->
                                        <div class="tp-caption sfl tp-resizeme"
                                             data-x="left" data-hoffset="60"
                                             data-y="center" data-voffset="10"
                                             data-speed="800"
                                             data-start="1200"
                                             data-easing="Power3.easeInOut"
                                             data-splitin="none"
                                             data-splitout="none"
                                             data-elementdelay="0.1"
                                             data-endelementdelay="0.1"
                                             data-endspeed="300"
                                             style="z-index: 7;  font-size:24px; color:#888888; font-weight:500; max-width: auto; max-height: auto; white-space: nowrap;">${item.c_name3}</div>

                                        <!-- LAYER NR. 1 -->
                                        <div class="tp-caption sfr tp-resizeme"
                                             data-x="left" data-hoffset="210"
                                             data-y="center" data-voffset="5"
                                             data-speed="800"
                                             data-start="1300"
                                             data-easing="Power3.easeInOut"
                                             data-splitin="chars"
                                             data-splitout="none"
                                             data-elementdelay="0.03"
                                             data-endelementdelay="0.4"
                                             data-endspeed="300"
                                             style="z-index: 5; font-size:36px; font-weight:800; color:#000;  max-width: auto; max-height: auto; white-space: nowrap;">￥${item.c_price} </div>

                                        <!-- LAYER NR. 4 -->
                                        <div class="tp-caption lfb tp-resizeme scroll"
                                             data-x="left" data-hoffset="60"
                                             data-y="center" data-voffset="80"
                                             data-speed="800"
                                             data-start="1300"
                                             data-easing="Power3.easeInOut"
                                             data-elementdelay="0.1"
                                             data-endelementdelay="0.1"
                                             data-endspeed="300"
                                             data-scrolloffset="0"
                                             style="z-index: 8;"><a href="#." class="btn-round big">立即抢购</a> </div>
                                    </li></a>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--轮播图结束-->

                    <!-- 轮播图右侧  -->
                    <div class="col-md-3 no-padding">

                        <!-- New line required  -->
                        <div class="product">
                            <div class="like-bnr">
                                <div class="position-center-center">
                                    <h5>爆款手机</h5>
                                    <h4>HUAWEI P20</h4>
                                    <span class="price">￥3559.99</span> </div>
                            </div>
                        </div>

                        <!-- Weekly Slaes  -->
                        <div class="week-sale-bnr">
                            <h4>每周 <span>销售!</span></h4>
                            <p>本周可节省高达50％的所有在线商店商品</p>
                            <a href="${pageContext.request.contextPath}/goods/goodsList?cat_id=1&currentPage=1" class="btn-round">现在去购物</a>
                        </div>
                    </div>
                    <!-- 轮播图右侧 结束 -->
                </div>
            </div>
        </div>
    </section>

    <!-- Content -->
    <div id="content">

        <!-- 第一部分 -->
        <section class="featur-tabs padding-top-60 padding-bottom-60">
            <div class="container">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-pills margin-bottom-40" role="tablist">
                    <li role="presentation" class="active"><a href="#featur" aria-controls="featur" role="tab" data-toggle="tab">热销推荐</a></li>
<%--                    <li role="presentation"><a href="#special" aria-controls="special" role="tab" data-toggle="tab">特价</a></li>--%>
<%--                    <li role="presentation"><a href="#on-sal" aria-controls="on-sal" role="tab" data-toggle="tab">爆款</a></li>--%>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- 今日推荐 -->
                    <div role="tabpanel" class="tab-pane active fade in" id="featur">
                        <!-- Items Slider -->
                        <div class="item-slide-5 with-nav">
                            <c:forEach items="${likes}" var="goods">
                            <!-- 产品 -->
                            <div class="product">
                                <article><a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" ><img class="img-responsive" src="${goods.image1}" alt="" ></a>
                                    <!-- 产品名称 -->
                                    <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                    <!-- 五颗星星 -->
                                    <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></p>
                                    <!--价钱-->
                                    <div class="price">¥${goods.goods_price}</div>
                                    <!--加入购物车功能-->
                                    <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                            </div>
                            <!--产品结束 重复-->
                            </c:forEach>
                            <%--结束遍历--%>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Main Tabs Sec -->
        <section class="main-tabs-sec padding-top-60 padding-bottom-0">
            <div class="container">
                <ul class="nav margin-bottom-40" role="tablist">
                    <li role="presentation" class="active"><a href="#tv-au" aria-controls="featur" role="tab" data-toggle="tab"> <i class="flaticon-computer"></i> 电视音频 </a></li>
                    <li role="presentation"><a href="#smart" aria-controls="special" role="tab" data-toggle="tab"><i class="flaticon-smartphone"></i>智能手机 </a></li>
                    <li role="presentation"><a href="#deks-lap" aria-controls="on-sal" role="tab" data-toggle="tab"><i class="flaticon-laptop"></i>笔记本电脑 </a></li>
                    <li role="presentation"><a href="#game-com" aria-controls="special" role="tab" data-toggle="tab"><i class="flaticon-gamepad-1"></i>游戏机 </a></li>
                    <li role="presentation"><a href="#watches" aria-controls="on-sal" role="tab" data-toggle="tab"><i class="flaticon-computer-1"></i>手表 </a></li>
                    <li role="presentation"><a href="#access" aria-controls="on-sal" role="tab" data-toggle="tab"><i class="flaticon-keyboard"></i>配饰 </a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- 电视音评 -->
                    <div role="tabpanel" class="tab-pane active fade in" id="tv-au">
                        <!-- 产品列表 -->
                        <div class="item-slide-5 with-bullet no-nav">
                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==1}">
                                <div class="product">
                                    <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                        <!-- Content -->
                                        <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                        <!-- Reviews -->
                                        <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                        <div class="price">¥${goods.goods_price}</div>
                                        <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                </div>
                                </c:if>
                            </c:forEach>
                            <!-- Product -->
                        </div>
                    </div>

                    <!-- 智能手机 -->
                    <div role="tabpanel" class="tab-pane fade" id="smart">
                        <!-- 产品列表 -->
                        <div class="item-col-5">

                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==2}">
                                    <div class="product">
                                        <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                            <!-- Content -->
                                            <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                            <!-- Reviews -->
                                            <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                            <div class="price">¥${goods.goods_price}</div>
                                            <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                    </div>
                                </c:if>
                            </c:forEach>


                        </div>
                    </div>
                    <!-- 笔记本电脑 -->
                    <div role="tabpanel" class="tab-pane fade" id="deks-lap">

                        <!-- 产品列表 -->
                        <div class="item-col-5">

                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==3}">
                                    <div class="product">
                                        <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                            <!-- Content -->
                                            <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                            <!-- Reviews -->
                                            <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                            <div class="price">¥${goods.goods_price}</div>
                                            <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                    <!-- 游戏机 -->
                    <div role="tabpanel" class="tab-pane fade" id="game-com">

                        <!-- 产品列表 -->
                        <div class="item-col-5">

                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==4}">
                                    <div class="product">
                                        <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                            <!-- Content -->
                                            <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                            <!-- Reviews -->
                                            <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                            <div class="price">¥${goods.goods_price}</div>
                                            <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                    <!-- 手表 -->
                    <div role="tabpanel" class="tab-pane fade" id="watches">

                        <!-- 产品列表 -->
                        <div class="item-col-5">

                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==5}">
                                    <div class="product">
                                        <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                            <!-- Content -->
                                            <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                            <!-- Reviews -->
                                            <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                            <div class="price">¥${goods.goods_price}</div>
                                            <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                    <!-- 配饰 -->
                    <div role="tabpanel" class="tab-pane fade" id="access">

                        <!-- 产品列表 -->
                        <div class="item-col-5">

                            <!-- Product -->
                            <c:forEach items="${goodss}" var="goods">
                                <c:if test="${goods.cat_id==6}">
                                    <div class="product">
                                        <article> <img class="img-responsive" src="${goods.image1}" alt="" >
                                            <!-- Content -->
                                            <a href="${pageContext.request.contextPath}/goods/goodsDetail?goods_id=${goods.goods_id}" class="tittle">${goods.goods_name}</a>
                                            <!-- Reviews -->
                                            <p class="rev"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i> <i class="fa fa-star-o"></i></p>
                                            <div class="price">¥${goods.goods_price}</div>
                                            <a href="${pageContext.request.contextPath}/goods/addCart?userName=${Username}&goods_id=${goods.goods_id}" class="cart-btn"><i class="icon-basket-loaded"></i></a> </article>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </div>
    <!-- End Content -->
    <%@include file="Footer.jsp"%>
    <!-- GO TO TOP  -->
    <a href="#" class="cd-top"><i class="fa fa-angle-up"></i></a>
    <!-- GO TO TOP End -->

</div>
<!-- End Page Wrapper -->
<%@include file="JavaScripts.jsp"%>

</body>
</html>
